<template>
  <Evaluation>
    <view class="homeContainer">
      <swiper
          class="swiper"
          :modules="swiperModules"
          :effect="'coverflow'"
          :grab-cursor="true"
          :centered-slides="true"
          :slides-per-view="'auto'"
          :coverflow-effect="{
        rotate: 30,
        stretch: 0,
        depth: 150,
        modifier: 1,
        slideShadows: true
      }"
          :initial-slide="activeIndex"
          @slideChange="onSlideChange"
      >
        <swiper-slide @click="handelClick" :class="item.index == (activeIndex - 2 ) ? 'slide-prev-2':''" class="slide"
                      ref="swiperRef" v-for="item in bannerList" :key="item.index">
          <image :src="item.url"></image>
        </swiper-slide>
      </swiper>
      <view class="beginBtn" @click="handelTest">
        开始测评
      </view>
    </view>
  </Evaluation>
</template>

<script setup lang="ts">
import {Pagination, EffectCoverflow} from 'swiper'
import {Swiper, SwiperSlide} from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/effect-coverflow'

import Evaluation from '@/components/evaluation/index.vue'
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import banner1 from '@/static/image/firstBanner.png'
import banner2 from '@/static/image/secondBanner.png'
import banner3 from '@/static/image/thirdBanner.png'
import banner4 from '@/static/image/fourthBanner.png'
import banner5 from '@/static/image/fifthBanner.png'

const swiperModules = ref([Pagination, EffectCoverflow])

const route = useRoute()
const modelNumber = ref(0)
const swiperRef = ref([])
const activeIndex = ref(3)

const bannerList = [
  {
    url: banner1,
    index: 0,
    isActive: true
  },
  {
    url: banner2,
    index: 1,
    isActive: false
  },
  {
    url: banner3,
    index: 2,
    isActive: false
  },
  {
    url: banner4,
    index: 3,
    isActive: false
  },
  {
    url: banner5,
    index: 4,
    isActive: false
  }
]
const handelClick = (e) => {
  console.log(e, 'click')
}
const onSlideChange = (e) => {
  activeIndex.value = e.activeIndex
  bannerList.forEach((item) => {
    item.isActive = false
  })
  bannerList[e.activeIndex].isActive = true
}

// onLoad(query=>{
// })
onMounted(() => {
  if (route.query.type) {
    modelNumber.value = Number(route.query.type)
  }
  // if(route.query.type === 'begin'){
  //   modelNumber.value = 1
  // }else{
  //
  // }
})
const handelTest = () => {

  // #ifdef APP-PLUS
  uni.navigateTo({
    url: '/page'
  })
  // #endif
}
</script>


<style scoped lang="scss">
.beginBtn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5rpx;
  width: 125rpx;
  height: 37.11rpx;
  background-image: url('../../static/image/all_Btn.png');
  background-size: 100% 100%;
  margin-top: 15rpx;
  font-weight: 500;
  font-size: 10.92rpx;
  color: #FFFFFF;
  letter-spacing: 0;
  text-align: center;
  line-height: 37.11rpx;
}

.homeContainer {
  width: 100%;
  height: 100%;
}

.swiper {
  height: 100%;
  width: 1170px;
  padding-top: 50px;
  padding-bottom: 50px;

  .slide {
    width: 161rpx;
    height: 210rpx;

    image {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

::v-deep .uni-swiper-slide-frame {
  display: flex;
}

//.swiper-slide-active {
//  transform: translate3d(0px, 0px, 0px) rotateX(0deg) rotateY(0deg) scale(1.1) !important;
//}
//
//.swiper-slide-prev {
//  transform: translate3d(0px, 0px, -50px) rotateX(0deg) rotateY(-30deg) scale(1) !important;
//  //transform: translate3d(0px, -2px, -450px) rotate3d(0, 15, 0, -60deg) !important;
//}
//
//.swiper-slide-next {
//  transform: translate3d(0px, 0px, -50px) rotateX(0deg) rotateY(30deg) scale(1) !important;
//}
//
//.slide-prev-2 {
//  transform: translate3d(0px, -2px, -370px) rotate3d(0, 15, 0, -41deg) !important;
//}
//
//.swiper-slide-next + .swiper-slide {
//  /* 这里添加你想要应用的样式 */
//  transform: translate3d(0px, 0px, -370px) rotateX(0deg) rotateY(41deg) !important
//}
</style>
